﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/pagination.css">
<link rel="stylesheet" type="text/css" href="css/pagination.extend.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pagination.jump.js"></script>
<!--<script type="text/javascript" src="js/jquery.pagination.extend.js"></script>-->
<title></title>
<script>
$(function(){
	var initPagination = function() {
		var total_page = $("#hiddenresult div.result").length;
		// 创建分页
		$("#pagination").pagination(total_page,{
			callback: page_callback,
			items_per_page : 1,				
			prev_text:"上一页",
			next_text:"下一页",
			num_edge_entries : 3,			//边缘值
			ellipse_text : '...',			//边缘显示
			num_display_entries : 5	,		//显示条数
			link_to : 'javascript:void(0)'
			
		});
	 }();
	 
	 function page_callback(page_index, jq){
		var new_content = $("#hiddenresult div.result:eq("+page_index+")").clone();
		//$("#Searchresult").empty().append(new_content); //装载对应分页的内容
		return false;
	}
	
})
</script>
</head>
<body>
<div id="pagination" style="display:block; padding:5px;float:left"></div>

<div id="Searchresult" style="float:left;clear:left;"></div>
<div id="hiddenresult" style="display:none;">
	<!-- 列表元素 -->
    <div class="result">test1</div>
    <div class="result">test2</div>
    <div class="result">test3</div>
    <div class="result">test4</div>
    <div class="result">test5</div>
    <div class="result">test6</div>
    <div class="result">test7</div>
    <div class="result">test8</div>
</div>
</body>
</html>